<template>
  <div>
    <!-- 单层菜单 -->
    <el-menu-item 
      v-for="item in singleMenus" 
      :key="item.path"
      :index="resolvePath(item.path)"
    >
      <el-icon>
        <component :is="item.meta?.icon" />
      </el-icon>
      <template #title>{{ item.meta?.title }}</template>
    </el-menu-item>

    <!-- 多层菜单 -->
    <el-sub-menu 
      v-for="item in subMenus"
      :key="item.path"
      :index="resolvePath(item.path)"
    >
      <template #title>
        <el-icon>
          <component :is="item.meta?.icon" />
        </el-icon>
        <span>{{ item.meta?.title }}</span>
      </template>
      
      <menu-item 
        :menu-list="item.children"
        :base-path="resolvePath(item.path)"
      />
    </el-sub-menu>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import path from 'path-browserify'

defineOptions({
  name: 'MenuItem'
})

const props = defineProps({
  menuList: {
    type: Array,
    required: true
  },
  basePath: {
    type: String,
    default: ''
  }
})

// 分离单层菜单和多层菜单
const singleMenus = computed(() => 
  props.menuList.filter(item => !item.children?.length)
)

const subMenus = computed(() => 
  props.menuList.filter(item => item.children?.length)
)

// 解析路由路径
const resolvePath = (routePath) => {
  if (routePath.startsWith('/')) {
    return routePath
  }
  return path.resolve(props.basePath, routePath)
}
</script> 